<template>
    <div>
        <a-form :form="form" @submit="onSubmit" id="update-form">
            <div class="header">
                <h3>一、基本信息</h3>
                <div class="operate">
                    <transition name="slide-fade">
                        <a-button type="primary" @click="returned" v-show="!disabled">还原默认</a-button>
                    </transition>
                    <a-button type="primary" v-if="disabled" @click="edit">修改</a-button>
                    <a-button type="primary" @click="onSubmit" v-else>保存修改</a-button>
                </div>
            </div>
            <div class="form-main-content">
                <a-row :gutter="10">
                    <a-col :key="0" :span="8" class="form-item">
                        <a-form-item label="上级菜单">
                            <a-select
                                    v-decorator="['pid']"
                                    placeholder="请选择上级菜单"
                                    v-show="!disabled"
                            >
                                <a-select-option key="0">
                                    上级
                                </a-select-option>
                                <a-select-option v-for="v in menus" :key="v.id" :value="v.id">
                                    {{v.name}}
                                </a-select-option>
                            </a-select>
                            <div v-if="disabled">{{getUpperMenus[data.pid]}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :key="1" :span="8" class="form-item">
                        <a-form-item label="菜单名称">
                            <a-input placeholder="菜单名称" v-show="!disabled" v-decorator="[
                            'name',
                            {rules: [{ required: true, message: '请输入菜单名称' }]}
                        ]"/>
                            <div v-if="disabled">{{data.name}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :key="2" :span="8" class="form-item">
                        <a-form-item label="菜单路径">
                            <a-input placeholder="菜单路径" v-decorator="['url']" v-show="!disabled"/>
                            <div v-if="disabled">{{data.url}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :key="3" :span="8" class="form-item">
                        <a-form-item>
                        <span slot="label">
                            菜单图标&nbsp;
                            <a href="https://vue.ant.design/components/icon-cn/" target="_blank">
                                <a-tooltip title="点击进入页面复制图标">
                                    <a-icon type="question-circle-o" style="color: red"/>
                                </a-tooltip>
                            </a>
                        </span>
                            <a-input placeholder="菜单图标" v-decorator="[ 'icon']" v-show="!disabled"/>
                            <div v-if="disabled">{{data.icon}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :key="4" :span="8" class="form-item">
                        <a-form-item label="状态">
                            <div v-if="disabled">{{parseInt(data.status) === 0 ? '停用' : '可用'}}</div>
                            <a-select v-decorator="['status', {initialValue: data.status}]" v-show="!disabled">
                                <a-select-option :value="1">
                                    可用
                                </a-select-option>
                                <a-select-option :value="0">
                                    停用
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :key="5" :span="8" class="form-item">
                        <a-form-item label="是否为菜单">
                            <a-select v-decorator="['is_menu', {initialValue: data.is_menu}]" v-show="!disabled">
                                <a-select-option :value="1">
                                    是
                                </a-select-option>
                                <a-select-option :value="0">
                                    否
                                </a-select-option>
                            </a-select>
                            <div v-if="disabled">{{parseInt(data.is_menu) === 0 ? '否' : '是'}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :key="6" :span="24" class="form-item">
                        <a-form-item label="备注">
                            <a-textarea
                                    rows="6"
                                    placeholder="请输入备注"
                                    v-show="!disabled"
                                    v-decorator="['remark', {initialValue: data.remark}]"/>
                            <div v-if="disabled">{{data.remark}}</div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>
        </a-form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                menus: [],
                id: 0,
                disabled: true,
                data: {},
                form: this.$form.createForm(this),
                labelCol: {lg: {span: 6}, sm: {span: 6}},
                wrapperCol: {lg: {span: 18}, sm: {span: 18}}
            }
        },

        computed: {
            getUpperMenus() {
                let menuObj = {};
                this.menus.map(items => {
                    menuObj[items.id] = items.name
                });
                return menuObj
            }
        },

        methods: {
            onSubmit(form) {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.data = {...this.data, ...values};
                                this.disabled = true
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            edit() {
                this.disabled = false
            },
            returned() {
                this.form.setFieldsValue(this.data)
            },
            async postData(param) {
                return await this.http('put', 'menu/update?id=' + this.id, param);
            },
            async getDetail(id) {
                return await this.http('get', 'menu/view', {id: id});
            }
        },
        mounted() {
            this.http('get', 'menu/list').then(res => {
                this.menus = res
            });
            this.id = this.$route.params.id;
            this.getDetail(this.id).then(res => {
                res.pid = String(res.pid);
                this.form.setFieldsValue(res);
                this.data = res
            })
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .header {
        @include fj();
        margin-bottom: 30px;

        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .3s ease;
    }

    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
</style>
